<template>
	<view>
		<view class="banner-box">
			<view v-for="(item,index) in imgList" :key="index">

			</view>
			<template>
				<!-- 轮播图 -->
				<view>
					<view class="page-section swiper">
						<view>
							<swiper :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
								:indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval"
								:duration="duration">
								<swiper-item v-for="item in imgList">
									<view>
										<image :src="item.imgSrc" mode=""></image>
									</view>
								</swiper-item>

								<!-- <swiper-item>
									<view>
										<image src="/static/banner_01.jpg" mode=""></image>
									</view>
								</swiper-item>
								<swiper-item>
									<view>
										<image src="/static/banner_02.jpg" mode=""></image>
									</view>
								</swiper-item>
								<swiper-item>
									<view>
										<image src="/static/banner_02.jpg" mode=""></image>
									</view>
								</swiper-item> -->
							</swiper>
						</view>
					</view>
				</view>
				<!-- 轮播图 -->
			</template>

		</view>
	</view>
</template>

<script>
	export default {
		name: "homeBanner",
		props: {
			imgList: {
				default: () => [],
				type: Array
			},
		},
		data() {
			return {
				timmer: null,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				indicatorColor: "#292b40",
				indicatorActiveColor: "#ffffff"
			};
		},
		// 
		mounted() {

		},
		// 
		beforeDestroy() {

		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 750rpx;
		height: 422rpx;
		background-color: #0f0f27;
	}

	.banner .swiper {
		width: 750rpx;
		height: 422rpx !important;
	}

	.banner .swiper-item {
		width: 750rpx;
		height: 422rpx !important;
	}

	.banner .swiper-item image {
		display: block;
		width: 750rpx;
		height: 422rpx !important;
	}
</style>
